<template>
  <view class="my-userinfo-container">
    <!-- 头像区域 -->
    <view class="avatar-box">
      <image :src="userinfo.avatarUrl"></image>
      <text>{{userinfo.nickName}}</text>
    </view>
    <!-- 数据列表区域 -->
    <view class="panel-box">
      <!-- 第一部分数据统计列表 -->
      <view class="panel-one-body">
        <view class="panel-one-info" v-for="(item1,index1) in allMessage" :key="index1">
          <text class="number">{{item1.num}}</text>
          <text class="descs">{{item1.name}}</text>
        </view>
      </view>
      <!-- 第二部分订单列表 -->
      <view class="panel-two-body">
        <view class="panel-two-title">我的订单</view>
        <view class="panel-two-item">
          <view class="panel-two-info" v-for="(item2,index2) in orderList" :key="index2">
            <image :src="item2.img"></image>
            <text class="pic-name">{{item2.name}}</text>
          </view>
        </view>
      </view>
      <!-- 第三部分操作列表 -->
      <view class="panel-three-body">
        <view :class="['panel-three-info', index===operationList.length-1?'':'uderline']"
          v-for="(item3,index3) in operationList" :key="index3" @click="loginout(item3)">
          <text class="opration-name">{{item3}}</text>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: "my-userinfo",
    data() {
      return {
        // 数据统计
        allMessage: [{
          num: 8,
          name: '收藏的店铺'
        }, {
          num: 16,
          name: '收藏的商品'
        }, {
          num: 18,
          name: '关注的商品'
        }, {
          num: 86,
          name: '足迹'
        }],
        // 订单数据
        orderList: [{
          img: '../../static/my-icons/icon1.png',
          name: '待付款'
        }, {
          img: '../../static/my-icons/icon2.png',
          name: '待收货'
        }, {
          img: '../../static/my-icons/icon3.png',
          name: '退款/退货'
        }, {
          img: '../../static/my-icons/icon4.png',
          name: '全部订单'
        }],
        // 操作信息
        operationList: ['收货地址', '联系客服', '退出登录']
      };
    },
    computed: {
      ...mapState('m_user', ['userinfo'])
    },
    methods: {
      ...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
      loginout(data) {
        if (data === '退出登录') {
          wx.showModal({
            title: '温馨提示',
            content: '您确定要退出吗？',
            success: res => {
              if (res.confirm) {
                // 清空所有数据token、地址、个人信息
                this.updateToken('')
                this.updateAddress({})
                this.updateUserInfo({})
                uni.$showMsg('您已退出登录')
              }
            }
          })
        }
      }
    },
  }
</script>

<style lang="scss">
  .my-userinfo-container {
    height: 100vh;
    background: #f4f4f4;

    // 头像区域
    .avatar-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 400rpx;
      background: #c00000;

      // 头像图片
      image {
        height: 200rpx;
        width: 200rpx;
        border-radius: 100%;
        border: 4rpx solid white;
        box-shadow: 0px 0px 9px 0px;
      }

      text {
        margin-top: 10px;
        color: white;
      }
    }

    // 数据列表区域
    .panel-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      // 第一个面板
      .panel-one-body {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 130rpx;
        width: 95vw;
        margin-top: -20rpx;
        background: white;
        border-radius: 5px;
        box-shadow: 2px 1px 3px 0px #dcdbdb;

        .panel-one-info {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }

      // 第二个面板
      .panel-two-body {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 95vw;
        height: 266rpx;
        margin-top: 10px;
        background: white;
        border-radius: 5px;
        box-shadow: 2px 1px 3px 0px #dcdbdb;

        .panel-two-title {
          margin: 0 10px;
          line-height: 45px;
          border-bottom: 1px solid #dfdfdf;
        }

        .panel-two-item {
          display: flex;
          align-items: center;
          justify-content: space-around;

          .panel-two-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            image {
              width: 90rpx;
              height: 90rpx;
            }
          }
        }
      }

      // 第三个面板
      .panel-three-body {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 95vw;
        margin-top: 10px;
        background: white;
        border-radius: 5px;
        box-shadow: 2px 1px 3px 0px #dcdbdb;

        .panel-three-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 80rpx;
          margin: 0 10px;
        }
      }
    }
  }

  // 下划线
  .uderline {
    border-bottom: 1px solid #dfdfdf;
  }
</style>
